// 轮播图
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  line-height: 1;
  height: 5.5rem;
  width: 100%;
}
.swiper{
  .button-prev,
  .button-next{
    cursor: pointer;
  }
}
.carousel-inner {
  .item {
    // position: relative;

    .w1200 {
      width: 10rem;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, 0);
    }
  }

  .swiper-title {
    color: #FFF;
    font-family: PingFang SC;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 0.80rem;
    padding-top: 1.2rem;
  }

  .swiper-details {
    color: #FFF;
    font-size: 0.2rem;
    line-height: 0.35rem;
    padding-top: 0.16rem;
  }

  .swiper-tips {
    color: #FFF;
    font-family: Roboto;
    font-size: 0.24rem;
    font-style: normal;
    font-weight: 700;
    line-height: 0.8rem;
    padding-top: 1.08rem;
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 4%;
      width: 0.50rem;
      height: 0.04rem;
      width: 0.5rem;
      background-color: #fff;
    }
  }
}


.carousel-indicators {
  li {
    width: 0.16rem;
    height: 0.04rem;
    background-color: rgba(235, 235, 235, 0.5);
    border: none;
    margin: 0;
  }

  li.active {
    width: 0.64rem;
    height: 0.04rem;
    // background-color: #fff !important;
  }
}

.mian-banner .item{
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.5) 1px 0 10px;
}


.mySwiper {
  width: 100%;
  height: 4.6rem;

  .swiper-slide {
    width: 3.68rem;
    height: 3.48rem;
    text-align: center;
    font-size: .18rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;

  }
  a{
    position: relative;
    display: block;
    &::before{
      content: '';
      top: 0;
      width: 100%;
      height: 100%;
      left: 0;
      position: absolute;
      display: block;
      z-index: 3;
      background: linear-gradient(360deg, #000000 -11.19%, rgba(0, 0, 0, 0) 43.48%);
    }
    img{
      display: block;
    }
    strong{
      z-index: 5;
      display: block;
      position: absolute;
      bottom: 0;
      color: #fff;
      text-decoration: none;
      text-align: center;
      width: 100%;
      padding: 0.1rem;
    }
  }
}



.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.swiper-pagination {
  width: 10rem !important;
  text-align: left;
  left: 50% !important;
  transform: translate(calc(-50% - 1rem), 0) !important;
  top: 3.78rem !important;

  span {
    width: .32rem;
    height: .08rem;
    background-color: rgba(140, 140, 140, 1);
    border-radius: 2px;

    &.swiper-pagination-bullet-active {
      width: .64rem;
      height: .08rem;
      background-color: #272727;
    }
  }
}

.swiper-button {
  width: 12rem;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  top: 3.6rem !important;
  position: absolute;
  display: flex;
  z-index: 50;
  justify-content: flex-end;
}



// 产品中心
.product-title {
  margin: .80rem auto 0.3rem;
  height: .5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  h2 {
    font-size: .48rem;
    color: #272727;
  }

  .product-tab.tab-buttons {
    justify-content: flex-end;
  }
}

// 质量检测
.quality-box {
  background: #FBFBFD url('/img/index/quality-bg.png');
  background-size: 100% 100%;
  height: 4.6rem;
  overflow: hidden;

  h2 {
    position: relative;
    margin: .72rem auto .48rem;
    height: .44rem;
    width: 2.4rem;
    color: #272727;
    font-family: PingFang SC;
    font-size: .4rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h2::before,
  h2::after {
    content: '';
    display: block;
    position: absolute;
    width: .88rem;
    height: .04rem;
    top: 50%;
  }

  h2::before {
    right: -50%;
    background: linear-gradient(90deg, #272727 0%, rgba(217, 217, 217, 0.00) 103.92%);
  }

  h2::after {
    left: -50%;
    background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #272727 103.92%);
  }

  p {
    margin: 0 auto .16rem;
    color: #666;
    font-family: PingFang SC;
    font-size: .20rem;
    font-weight: 400;
    line-height: .35rem;
  }
}

.colorBlock {
  color: rgba(39, 39, 39, 1);
}

.colorWrite {
  color: #fff;
}

.colorParmy {
  color: rgba(102, 102, 102, 1);
}

.model-bgc1 {
  background-color: #F5F5F7;
}

.model-bgc2 {
  background-color: rgba(1, 20, 28, 1);
}

.pl20 {
  padding-left: .20rem;
}

.pr20 {
  padding-right: .20rem;
}

.size20 {
  font-size: 0.186667rem
    /* 14/75 */
  ;
}

.size16 {
  font-size: 0.14rem
    /* 12/75 */
  ;
}

.size14 {
  font-size: .12rem;
}

.height186 {
  height: 1.86rem;
}

.section {
  padding: .32rem 0;

  .w1200 {
    margin: 0 auto;
    display: flex;
    overflow: hidden;

    +.w1200 {
      margin-top: .32rem;
    }
  }

  .model-box {
    flex: 1;
    height: 4.48rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #F5F5F7;

    .hidden-item {
      display: none;
    }

    +.model-box {
      margin-left: .32rem;
    }

    &:hover {
      background-color: #01141c;

      .title {
        color: #fff;
      }

      h3,
      span {
        color: #ccc;
      }

      p {
        color: #999;
      }
    }

    .tab-item {
      cursor: pointer;
    }


    .videoWrap {
      width: 100%;
      height: 2rem;
      display: block;
      margin-top: 0.2rem;

      a {
        position: relative;
        height: 2.5rem;
        overflow: hidden;
        padding: 0;

        &::after {
          position: absolute;
          content: '';
          height: 100%;
          width: 100%;
          background: url(/img/common/play.png) center no-repeat;
          background-size: .48rem .48rem;
          left: 0;
          top: 0;
          cursor: pointer;
          z-index: 9
        }
      }


      img {
        width: 100%;

      }
    }
  }

  .main-box {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* overflow-x: hidden;
    overflow-y: auto; */
    overflow: hidden;
    margin-bottom: 0.04rem;

    a {
      display: block;
      text-decoration: none;
      padding: 0 0.1rem 0.04rem 0.1rem;
    }

    a:hover {
      background: #666;
    }

  }


  .title {
    height: .74rem;
    line-height: 1rem;
    font-size: 0.32rem;
    margin: 0;

    >span.un-sign {
      font-size: 0.28rem;
    }
  }


  p {
    line-height: .24rem;
    height: .48rem;
    overflow: hidden;
    width: 100%;
    word-wrap: break-word;
  }

  .button {
    height: .86rem;
    color: #E3322C;
    font-family: PingFang SC;
    font-size: .16rem;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: .01rem solid #E3E3E7;
    ;

    i {
      margin-left: .08rem;
      display: inline-block;
      width: .2rem;
      height: .2rem;
      background: url('/img/index/model-arrow.png') center no-repeat;
    }
  }

  li {
    margin: 0 0 0.05rem
      /* 15/75 */
    ;
    line-height: .36rem;
  }

  .row-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;

    h3 {
      color: #333;
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 5%;
      line-height: 0.346667rem
        /* 26/75 */
      ;
    }
  }

  .model-img {
    width: 100%;
    margin-top: .2rem;
    margin-bottom: .16rem;
  }
}


.external-links {
  background: #F5F5F7;
  padding: 40px 0;

  h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;

    i {
      font-size: 24px;
      margin: 0 16px;
      color: #B7BCC4;
    }
  }

  .china-title {
    font-size: 32px;
  }

  .usa-title {
    font-size: 24px;
    color: #B7BCC4;
  }

  .linkSwiper {
    a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      width: 2.226667rem
        /* 167/75 */
        !important;
      height: 1.266667rem
        /* 95/75 */
      ;
      margin: 0.16rem;

      img {
        display: block;
      }
    }


  }
}



// ** index 页面移动端样式 0 - 1024
@media screen and (max-width: 1199px) {

  // 轮播图
  .carousel-inner>.item>img,
  .carousel-inner>.item>a>img {
    line-height: 1;
    height: 7.5rem;
    width: 100%;
  }

  .carousel-inner {
    .item {
      .w1200 {
        width: 100%;
        padding: 0 0.4rem;
      }
    }

    .swiper-title {
      color: #FFF;
      font-family: PingFang SC;
      font-size: 0.64rem;
      font-weight: 600;
      line-height: 0.80rem;
      padding-top: 1.2rem;
    }

    .swiper-details {
      color: #fff;
      font-size: 0.2rem;
      line-height: 0.35rem;
      padding-top: 0.16rem;
    }

    .swiper-tips {
      color: #FFF;
      font-family: Roboto;
      font-size: 0.24rem;
      font-style: normal;
      font-weight: 700;
      line-height: 0.8rem;
      padding-top: 1.08rem;
      position: relative;

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 4%;
        width: 0.50rem;
        height: 0.04rem;
        width: 0.5rem;
        background-color: #fff;
      }
    }
  }

  .mySwiper {
    width: 100%;
    height: 4.8rem;

    .swiper-button,
    .swiper-pagination {
      display: none;
    }
  }


  // 质量检测
  .quality-box {
    background: #FBFBFD url('/img/index/quality-bg.png');
    background-size: 100% 100%;
    height: auto;
    overflow: auto;
    padding: 0 0.4rem 0.4rem;

    h2 {
      position: relative;
      margin: .72rem auto .48rem;
      height: .44rem;
      width: 2.4rem;
      color: #272727;
      font-family: PingFang SC;
      font-size: .4rem;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    h2::before,
    h2::after {
      content: '';
      display: block;
      position: absolute;
      width: .88rem;
      height: .04rem;
      top: 50%;
    }

    h2::before {
      right: -50%;
      background: linear-gradient(90deg, #272727 0%, rgba(217, 217, 217, 0.00) 103.92%);
    }

    h2::after {
      left: -50%;
      background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #272727 103.92%);
    }

    p {
      margin: 0 auto .16rem;
      color: #666;
      font-family: PingFang SC;
      font-size: .20rem;
      font-weight: 400;
      line-height: .35rem;
    }
  }

  .pl20 {
    padding-left: .4rem;
  }

  .pr20 {
    padding-right: .4rem;
  }

  .height186 {
    height: 3.72rem;
  }

  .size20 {
    font-size: .4rem;
  }

  .size16 {
    font-size: .32rem;
  }

  .size14 {
    font-size: .28rem;
  }

  .section {
    padding: .32rem 0;

    .w1200 {
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.4rem;

      +.w1200 {
        margin-top: .4rem;
      }
    }

    .model-box {
      min-width: 100%;
      height: 8.4rem;
      display: flex;
      flex-direction: column;

      +.model-box {
        margin-left: 0rem;
        margin-top: 0.4rem;
      }
    }

    .main-box {
      width: 9.066667rem
        /* 680/75 */
      ;
      width: 100%;

      a {
        padding: 0.2rem;
        margin-bottom: 0.3rem;
      }
    }


    .title {
      height: 1.3rem;
      line-height: 1.4rem;
      font-size: 0.54rem;
      margin: 0;
    }


    p {
      line-height: 0.6rem;
      width: 100%;
      word-wrap: break-word;
    }

    .button {
      height: 1.6rem;
      color: #E3322C;
      font-family: PingFang SC;
      font-size: .32rem;
      font-style: normal;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: .01rem solid #E3E3E7;

      i {
        margin-left: .08rem;
        display: inline-block;
        width: .4rem;
        height: .4rem;
        background: url('/img/index/model-arrow.png') center no-repeat;
      }
    }

    .row-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin-bottom: .14rem;
      }
    }

    .model-img {
      width: 100%;
      margin-top: .2rem;
      margin-bottom: .16rem;
    }
  }


  // 产品中心
  .product-title {
    margin: .80rem auto .64rem;
    height: .7rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.3rem;

    h2 {
      font-size: .48rem;
      color: #272727;
    }

    .product-tab.tab-buttons {
      justify-content: flex-end;
    }
  }

}